<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon.ico">
  <link rel="mask-icon" href="/images/favicon.ico" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"blog.upup.fun","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="简单的想法记录。">
<meta property="og:type" content="article">
<meta property="og:title" content="用ChatGPT和AI绘画做一个微信小程序">
<meta property="og:url" content="http://blog.upup.fun/2023/02/20/%E7%94%A8ChatGPT%E5%92%8CAI%E7%BB%98%E7%94%BB%E5%81%9A%E4%B8%80%E4%B8%AA%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/index.html">
<meta property="og:site_name" content="猫头猫">
<meta property="og:description" content="简单的想法记录。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.328888.xyz/2023/02/20/XuKKx.jpeg">
<meta property="og:image" content="https://i.328888.xyz/2023/02/20/giTHv.md.png">
<meta property="og:image" content="https://i.328888.xyz/2023/02/20/gViAF.png">
<meta property="og:image" content="https://i.328888.xyz/2023/02/21/gVHiV.png">
<meta property="og:image" content="https://i.328888.xyz/2023/02/21/gzfsV.png">
<meta property="og:image" content="https://i.328888.xyz/2023/02/21/gxGVX.png">
<meta property="og:image" content="https://i.328888.xyz/2023/02/21/geH1J.png">
<meta property="og:image" content="https://i.328888.xyz/2023/02/21/gembq.png">
<meta property="og:image" content="https://i.328888.xyz/2023/02/21/geuMA.png">
<meta property="og:image" content="https://i.328888.xyz/2023/02/21/gztww.gif">
<meta property="article:published_time" content="2023-02-20T14:21:46.000Z">
<meta property="article:modified_time" content="2023-02-21T16:06:46.020Z">
<meta property="article:author" content="猫头猫">
<meta property="article:tag" content="小程序">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.328888.xyz/2023/02/20/XuKKx.jpeg">

<link rel="canonical" href="http://blog.upup.fun/2023/02/20/%E7%94%A8ChatGPT%E5%92%8CAI%E7%BB%98%E7%94%BB%E5%81%9A%E4%B8%80%E4%B8%AA%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>用ChatGPT和AI绘画做一个微信小程序 | 猫头猫</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">猫头猫</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-works">

    <a href="/works/" rel="section"><i class="fa fa-smile fa-fw"></i>小作品</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于我</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://blog.upup.fun/2023/02/20/%E7%94%A8ChatGPT%E5%92%8CAI%E7%BB%98%E7%94%BB%E5%81%9A%E4%B8%80%E4%B8%AA%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="猫头猫">
      <meta itemprop="description" content="如果我是一只小猫咪，每天只要喵喵叫。">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="猫头猫">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          用ChatGPT和AI绘画做一个微信小程序
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2023-02-20 22:21:46" itemprop="dateCreated datePublished" datetime="2023-02-20T22:21:46+08:00">2023-02-20</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>5.4k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>5 分钟</span>
            </span>
            <div class="post-description">简单的想法记录。</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>题目或许有些标题党，先大概交代一下上下文吧。一周多前用ChatGPT做了一个AI算命的微信小程序：“赛博运势丨AI测命理”。后来觉得似乎有点单调，差点意思。于是趁周末又加了一个<strong>每日运势</strong>的小功能。这个小功能在<strong>ChatGPT</strong>和<strong>AI绘画程序MidJourney</strong>的帮助下，花费两天时间就做的差不多了。这里还是大概总结一下过程，然后记录一些想法，大概是关于这些工具能给个人开发者带来什么样的加成。（个人总结向）</p>
<p>正式开始之前，先猜猜看下边成品图中哪些部分和ChatGPT或者AI绘画有关吧：  </p>
<p><img src="https://i.328888.xyz/2023/02/20/XuKKx.jpeg" alt=""></p>
<p>应该还是比较明显的，除了年份、今日运势这几个字以外，其他部分的<strong>文案和设计</strong>都和ChatGPT/AI绘画有关。我想先从个人工作流开始写起，一步步记录一下这些AI工具在整个小产品上线的过程中到底做了什么。</p>
<h1 id="个人工作流"><a href="#个人工作流" class="headerlink" title="个人工作流"></a>个人工作流</h1><p>在公司里要做一个需求时，通常会纠集一批不同角色的人去讨论，搞各种各样的评审、写各种各样的文档。作为个人开发者来说，在这一方面还是非常自由的 —— 因为只有自己一个人。但在整个“产品”迭代上线的过程中，我们仍然会需要在不同的阶段扮演“产品经理、设计师、前端、后端、运营、测试”等不同的角色。以这次做的“每日运势”小需求为例（只是示意，不一定严格按下边的顺序）：</p>
<ol>
<li><p>最开始时需要<strong>明确整体的需求</strong>：想做一个每日运势，每天进来点一下可以看到当天的运势、幸运色、幸运数字，并且需要做出一些解释。（产品）</p>
</li>
<li><p>然后大概<strong>设计一下要做成什么样子</strong>：界面大概是个比较神秘又有点可爱的画风，因为毕竟是娱乐为主，所以色调不能太严肃。上半部分需要展示一个整体的运势，下半部分展示类似签文或者解释之类的东西（设计）</p>
</li>
<li><p>接下来想一想<strong>文案怎么搞</strong>：每日运势有4种，可以调整概率；幸运数字有10个，幸运颜色有几十个，它们对应的签文或者解签的文案都是可能会在后期不断的添加。（产品&amp;运营）</p>
</li>
<li><p>整体设计的差不多了，接下来看看<strong>界面怎么写</strong>：在Pixso/Figma/PhotoShop上简单比划几下，然后想想页面拆分和模块设计，在哪调接口怎么存数据之类的。（前端&amp;设计）</p>
</li>
<li><p>前端好像做的差不多了，想一想<strong>数据要怎么处理</strong>吧：写几个接口，组织一下数据存到数据库/redis。UV没几个，凑合过吧。（后端）</p>
</li>
<li><p>试试看<strong>功能有没有坏</strong>：好像没有专门的测试阶段，因为在开发的过程中已经在顺便测试了。（测试）</p>
</li>
</ol>
<p>以上过程每个阶段都还是比较占时间的。对于部分个人开发者的业余项目来说，可能在实际做的时候，流程就变成了：</p>
<ol>
<li>冒出个好玩点子！</li>
<li>想想具体做成啥样，周末去做一下。</li>
<li>设计成啥样呢，怎么配色都不好看，画的图也又土又丑…</li>
<li>画图就画了两三个小时，还是没改好。。。算了，功能优先…</li>
<li>要这么多文案，百度直接抄好像也不太好… 那还是写个爬虫爬一下吧，不过也不是原创的…</li>
<li>写个自己都嫌弃的前端，再写个自己都嫌弃的后端，甚至还没来得及写完一个周末就过去了</li>
<li>算了，不做了。。。</li>
</ol>
<p>但现在，有了ChatGPT和AI绘画模型的帮助，中间的某些阶段或许可以稍微简化一点，或者少浪费一点时间、少费点脑子。回到最初的目标，需求已经明确了，接下来想一想要界面要长什么样子。</p>
<h1 id="设计：AI绘画"><a href="#设计：AI绘画" class="headerlink" title="设计：AI绘画"></a>设计：AI绘画</h1><h2 id="过程"><a href="#过程" class="headerlink" title="过程"></a>过程</h2><p>这里直接说是怎么用的了。我的想法是：界面需要比较神秘又有点可爱的画风，不要太严肃。由于是每日运势，所以界面可以长得像个日历。简单翻译一下给几个关键词：<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Generate a cute anime style daily calendar UI, Mystical</span><br></pre></td></tr></table></figure><br>把这段Prompt喂给AI绘画程序（这里用的是MidJourney网站），然后我们就可以去做别的事情了（比如其他和设计阶段无关的事情）。过了一会就给出了一些候选项：</p>
<p><img src="https://i.328888.xyz/2023/02/20/giTHv.md.png" alt=""></p>
<p>看上去都还是比较符合预期风格的，<strong>做背景图</strong>比较合适，并且<strong>配色</strong>也都比较完美（比我自己瞎写的好多了..）。由于最终的页面上需要展示比较多的元素，因此需要背景图中有<strong>多一些的空白区域</strong>。因此最终选择了<strong>主体形象最小</strong>的右上角图，尽管这个猫有三只耳朵。接下来就可以根据这张缩略图生成一张1024x1536的大图了：</p>
<p><img src="https://i.328888.xyz/2023/02/20/gViAF.png" alt=""></p>
<p>从这张图中我们可以得出以下信息：</p>
<ol>
<li>图中上半部分含义不明的<strong>文字部分</strong>可以<strong>抹去</strong>，变成我们自己的UI区域，用来放一些文字信息；下半部分颜色太杂，就用一个<strong>模糊遮罩</strong>盖住；这样我们就有了三大块文字区域；</li>
<li><strong>文字颜色</strong>可以用#F5BB9B或#835B5B（直接取图中的色号）；</li>
<li>为了让内容区域大一些，需要做一些<strong>裁剪</strong>；</li>
<li>需要稍微修剪一下猫耳朵。</li>
</ol>
<p>接下来就比较省事了：</p>
<ul>
<li>1、4用PhotoShop搞定（相对来说，要抹去或者修剪的部分以纯色为主，并且删总是比添快的）</li>
<li>接下来导出图片，直接拖到Pixso里面，并建一个750x1624的画板，发现放上去内容区域正好差不多够，于是3搞定。</li>
<li>最后打两行文本，画一个带透明度和模糊的圆角矩形，简单的设计稿就做完了：</li>
</ul>
<p><img src="https://i.328888.xyz/2023/02/21/gVHiV.png" alt=""></p>
<p>除此之外，一些素材也可以用AI绘画+AI抠图搞定，比如生成一些神秘的筒筒：<br><img src="https://i.328888.xyz/2023/02/21/gzfsV.png" alt="gzfsV.png"></p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
<li>速度：从拿到AI画的图，到最终做完一个简单的视觉稿，加起来不过十几分钟。</li>
<li>效率：对于个人项目来说，可以轻轻松松拿到一个<strong>无版权风险的、低重复的、符合想象的底图</strong>；并且可以<strong>直接根据底图获取到合适的配色</strong>。  </li>
</ul>
<p>以上这两点足以增加个人项目的精美度、减少个人在这种不擅长的事情上浪费的时间。反正不管怎么说，给我一个星期我也画不出来这样的背景图。</p>
<h1 id="文案：ChatGPT"><a href="#文案：ChatGPT" class="headerlink" title="文案：ChatGPT"></a>文案：ChatGPT</h1><h2 id="实时调用与离线数据"><a href="#实时调用与离线数据" class="headerlink" title="实时调用与离线数据"></a>实时调用与离线数据</h2><p>这个小程序的另一半功能：AI测运势，是直接<strong>实时调用</strong>的ChatGPT的API。具体可以看<a target="_blank" rel="noopener" href="https://juejin.cn/post/7200773486795718693">上一篇文章</a>。调这个API其实还是有很多限制的：比如每个key每秒请求数、每秒token数等，如果要用它做一些小服务之类的，要么给OpenAI氪金（充钱限制会少一点），要么给验证码收发平台氪金（多申请几个账号做账号池）。但无论哪种，速度都比较慢。  </p>
<p>但是如果我们需要的数据是<strong>离线</strong>的，使用ChatGPT的成本似乎会更低一些：如果把它当作一个拥有很强的创造力，并且大多数情况下会给出正确答案的“百科全书” —— 我们可以用它<strong>预先生成</strong>大量的数据存储起来，然后接下来对ChatGPT创作出来的“素材仓库”做文字游戏。最重要的是，我们可以调教它生成<strong>特定结构的文本</strong>，这可以大大减少后续处理花费的时间。</p>
<h2 id="批量生成离线数据"><a href="#批量生成离线数据" class="headerlink" title="批量生成离线数据"></a>批量生成离线数据</h2><p>还是以这次的小程序为例。我需要大量的签文以及不同幸运数字、不同幸运色的解释文案。恰好以前做过类似的需求，可以对比一下：</p>
<p>如果用人工配置，会需要花费至少<strong>1天</strong>的时间引经据典搜集文案，并把这些批量添加到配置平台中去。而这些搜索到的文案也往往<strong>受限于我们的“想象力”</strong> —— 因为我们的搜索结果肯定是和我们的输入相关，甚至最后搜不出来用比较尬的文案凑上。</p>
<p>对于类似这样的事情，ChatGPT可以很好的辅助解决。比如对于生成幸运色的文案，我们可以这样问：（总共有55种幸运颜色，每个颜色都需要&gt;10条文案）</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">假如你是一个算命先生，请帮我测算一下我今天的幸运色，并进行详细的解析。候选颜色有：天蓝、米白、金黄、粉红。你的回答需要以“今天的幸运色是……；它代表着……”为开头。请开始吧。</span><br></pre></td></tr></table></figure>
<p>ChatGPT会对此给出一段十分规整的回答：<br><img src="https://i.328888.xyz/2023/02/21/gxGVX.png" alt=""></p>
<p>接下来就好办了：只需要一段循环、一段正则：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> fetch <span class="keyword">from</span> <span class="string">&quot;node-fetch&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> fs <span class="keyword">from</span> <span class="string">&#x27;fs/promises&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> path <span class="keyword">from</span> <span class="string">&#x27;path&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ChatGPTAPI &#125; <span class="keyword">from</span> <span class="string">&quot;chatgpt&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; fileURLToPath &#125; <span class="keyword">from</span> <span class="string">&quot;url&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> chatgpt = <span class="keyword">new</span> ChatGPTAPI(&#123;</span><br><span class="line">    <span class="attr">apiKey</span>: YOUR_API_KEY,</span><br><span class="line">    fetch</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> allColors = [<span class="string">&#x27;星灰&#x27;</span>, <span class="string">&#x27;玫瑰灰&#x27;</span>, <span class="string">&#x27;枫红&#x27;</span>,<span class="string">&#x27;樱草紫&#x27;</span>, <span class="string">&#x27;冰山蓝&#x27;</span>, <span class="string">&#x27;月影白&#x27;</span>, ...]; <span class="comment">// 略过了</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/** 循环生成文案 **/</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">query</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> color <span class="keyword">of</span> allColors) &#123;</span><br><span class="line">        <span class="comment">// 每个颜色生成15条文案</span></span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">15</span>; ++i) &#123;</span><br><span class="line">            <span class="keyword">try</span> &#123;</span><br><span class="line">                <span class="keyword">const</span> color = allColors[i];</span><br><span class="line">                <span class="keyword">const</span> result = <span class="keyword">await</span> chatgpt.sendMessage(<span class="string">`假如你是一个算命先生，请帮我测算一下我今天的幸运色，并进行详细的解析。候选颜色有：<span class="subst">$&#123;color&#125;</span>。你的回答需要以“今天的幸运色是……；它代表着……”为开头。请开始吧。`</span>, &#123;</span><br><span class="line">                    <span class="attr">promptPrefix</span>: <span class="string">&#x27; &#x27;</span>,</span><br><span class="line">                    <span class="attr">promptSuffix</span>: <span class="string">&#x27; &#x27;</span></span><br><span class="line">                &#125;);</span><br><span class="line">                </span><br><span class="line">                <span class="comment">// 写入文件，略过了</span></span><br><span class="line"></span><br><span class="line">            &#125; <span class="keyword">catch</span> &#123;</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/** 处理文案 **/</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">handle</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 读入文件，略过了</span></span><br><span class="line">    <span class="keyword">const</span> raw = <span class="keyword">await</span> fs.readFile(<span class="string">&#x27;xxx&#x27;</span>, <span class="string">&#x27;utf-8&#x27;</span>);</span><br><span class="line">    <span class="keyword">const</span> [_, _colorName, _colorDesc] = raw.match(<span class="regexp">/今天你的幸运色是(.+?)色?[；，;。](.*)/</span>) ?? [];</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 还可以做一些简单的正则替换，比如把两个字的XX替换为XX色</span></span><br><span class="line">    <span class="keyword">const</span> format = <span class="function">(<span class="params">n</span>) =&gt;</span> n.length === <span class="number">2</span> ? n + <span class="string">&#x27;色&#x27;</span> : n;</span><br><span class="line">    <span class="keyword">let</span> colorDesc = _colorDesc.replace(<span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">`<span class="subst">$&#123;_colorName&#125;</span>(?!色)`</span>, <span class="string">&#x27;g&#x27;</span>), format(_colorName));</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 保存文件 略过了</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>需要注意的是，如果给定一系列的候选颜色，那ChatGPT的回复结果<strong>不是均匀分布</strong>的，而会是更倾向于其中的某一个或某几个颜色，我试了好几组，大概几百组数据（花掉了一个号的额度）都是如此。因此为了保证每个颜色都有足够的文案，直接把候选颜色设置成1个就可以精确控制了（也就是query函数中做的那样）。</p>
<p>同时，为了省钱，其实还可以一次让ChatGPT多生成几条文案，无非是到时候我们正则匹配时候的规则变一变：</p>
<p><img src="https://i.328888.xyz/2023/02/21/geH1J.png" alt=""></p>
<h2 id="总结-1"><a href="#总结-1" class="headerlink" title="总结"></a>总结</h2><ul>
<li>离线文本：ChatGPT可以<strong>快速生成满足特定结构的文本</strong>，这些文本可以被很方便地处理用于后续操作；</li>
<li>不均匀：如果给定ChatGPT一系列（可能没有正确答案的）选项，它的回答的分布可能是<strong>不均匀</strong>的；</li>
<li>批量：可以通过特定的用语诱导ChatGPT按照预期的行为回答，也可以一次生成<strong>多条文案</strong>。</li>
</ul>
<p>除了ChatGPT以外，顺带还试了一下New Bing，感觉被它拿捏的死死的…<br><img src="https://i.328888.xyz/2023/02/21/gembq.png" alt=""></p>
<h1 id="开发"><a href="#开发" class="headerlink" title="开发"></a>开发</h1><p>相对来说，以上两节中提到的内容和开发阶段对比，如果没有ChatGPT和MidJourney的帮助，花费的时间应该是差不多的。ChatGPT暂时在直接写项目代码方面可能还不太行，（比如某次我让问它一个css效果怎么实现，它告诉我用background-image: url图片…)<br>但如果把它当作除了google和stackoverflow以外的“第三种搜索引擎”，那效果还是很不错的，比如：</p>
<p><img src="https://i.328888.xyz/2023/02/21/geuMA.png" alt="geuMA.png"></p>
<p>前端和后端的开发部分就普普通通了，和上次写的没啥区别，就正常的业务代码。简单写一些关于前端部分的小点：  </p>
<ol>
<li>我们AI绘画生成的背景图顶部和底部都是比较规律的颜色，因此如果我们需要让这个页面的高度大于底图的高度，我们可以直接把背景图的底部裁下来一点，然后 background-repeat: repeat-y; 就可以把多出来的部分填满了。</li>
<li>尽管AI生成的图虽然不可以直接变成动图/视频，但是我们仍然可以通过一些简单的特效让它看起来好像有动画。比如上边生成的抽签筒素材，我们只需要简单的加个filter的动画就能营造出近似发光的效果：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">@keyframes button-shine &#123;</span><br><span class="line">    0% &#123;</span><br><span class="line">      filter: brightness(0.9);</span><br><span class="line">    &#125;</span><br><span class="line">    50% &#123;</span><br><span class="line">      filter: brightness(1.3);</span><br><span class="line">    &#125;</span><br><span class="line">    100% &#123;</span><br><span class="line">      filter: brightness(0.9);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><img src="https://i.328888.xyz/2023/02/21/gztww.gif" alt="gztww.gif"></p>
<h1 id="总结-2"><a href="#总结-2" class="headerlink" title="总结"></a>总结</h1><p>到这里就结束了。从这个小项目总结下来，体感上AI绘画可以在视觉上提供一些参考，比如背景图、配色；也可以生成一些素材；ChatGPT除了可以提供一些创意、当作搜索引擎之外，还可以辅助我们生成大量我们需要的文本素材。</p>
<p>或许以后text2img还可以做text2ui；对于想做一些小游戏的个人开发者来说，这些工具还可以辅助直接生成想要的素材和背景；说不定以后还会有由AI制作的vtuber和galgame之类的吧。。。反正能降低自己折腾的成本的东西都是好东西~</p>
<p>随便写写~ demo直接微信小程序搜“赛博运势丨AI测命理”，不贴二维码了~ </p>

    </div>

    
    
    
        <div class="reward-container">
  <div>嘻嘻</div>
  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
      
      <div style="display: inline-block;">
        <img src="/images/wechatpay.png" alt="猫头猫 微信支付">
        <p>微信支付</p>
      </div>
      
      <div style="display: inline-block;">
        <img src="/images/alipay.png" alt="猫头猫 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/images/wechat_channel.jpg">
            <span class="icon">
              <i class="fab fa-weixin"></i>
            </span>

            <span class="label">WeChat</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          
          <div class="post-tags">
              <a href="/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/" rel="tag"><i class="fa fa-tag"></i> 小程序</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2023/02/16/%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84GPT%E6%9C%8D%E5%8A%A1/" rel="prev" title="【完整的练手小项目】搭建自己的GPT服务">
      <i class="fa fa-chevron-left"></i> 【完整的练手小项目】搭建自己的GPT服务
    </a></div>
      <div class="post-nav-item">
    <a href="/2023/02/20/%E4%BD%A0%E7%94%9F%E6%88%90%E7%9A%84AI%E7%BB%98%E7%94%BB%EF%BC%8C%E5%8F%AF%E8%83%BD%E6%98%AF%E6%88%91%E7%9A%84/" rel="next" title="你生成的AI绘画，下一秒就是我的了">
      你生成的AI绘画，下一秒就是我的了 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">
      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=477844082&auto=1&height=66"></iframe>

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%AA%E4%BA%BA%E5%B7%A5%E4%BD%9C%E6%B5%81"><span class="nav-number">2.</span> <span class="nav-text">个人工作流</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%AE%BE%E8%AE%A1%EF%BC%9AAI%E7%BB%98%E7%94%BB"><span class="nav-number">3.</span> <span class="nav-text">设计：AI绘画</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%BF%87%E7%A8%8B"><span class="nav-number">3.1.</span> <span class="nav-text">过程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">3.2.</span> <span class="nav-text">总结</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%96%87%E6%A1%88%EF%BC%9AChatGPT"><span class="nav-number">4.</span> <span class="nav-text">文案：ChatGPT</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E6%97%B6%E8%B0%83%E7%94%A8%E4%B8%8E%E7%A6%BB%E7%BA%BF%E6%95%B0%E6%8D%AE"><span class="nav-number">4.1.</span> <span class="nav-text">实时调用与离线数据</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%B9%E9%87%8F%E7%94%9F%E6%88%90%E7%A6%BB%E7%BA%BF%E6%95%B0%E6%8D%AE"><span class="nav-number">4.2.</span> <span class="nav-text">批量生成离线数据</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93-1"><span class="nav-number">4.3.</span> <span class="nav-text">总结</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%BC%80%E5%8F%91"><span class="nav-number">5.</span> <span class="nav-text">开发</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%80%BB%E7%BB%93-2"><span class="nav-number">6.</span> <span class="nav-text">总结</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="猫头猫"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">猫头猫</p>
  <div class="site-description" itemprop="description">如果我是一只小猫咪，每天只要喵喵叫。</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">31</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">11</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">27</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/maotoumao" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;maotoumao" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:lhx_xjtu@163.com" title="E-Mail → mailto:lhx_xjtu@163.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">猫头猫</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
    <span title="站点总字数">91k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">1:22</span>
   | <a href="http://beian.miit.gov.cn/" rel="noopener" target="_blank">陕ICP备20005224号-2 </a>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

  

</body>
</html>
